<template>
    <div style="height: 89%; overflow-y: auto;">
        <div style="padding: 15px;color: #fff;">
    		<div style="margin-top: 25px;"></div>
    		<div class="center" style="font-size: 13px; color: #bdbdbd; font-family: 'Inter';">INVITE FRIENDS</div>
    		<div class="center" style="font-size: 26px; width: 90%;margin: 0 auto; text-align: center;margin-top: 25px;">
    			Refer friends and earn extra points
    		</div>
    		<div style="display: flex;align-items:center;margin-top: 40px;justify-content: center;" >
    			<div>+ </div>
    			<img style="margin-left: 8px; width: 20px;height: 20px;" src="../static/img/bi.png"></img>
    			<text style="font-size: 14px;color: #C1E3FF;font-weight: bold; margin-left: 8px;">1,000</text>
    			<text style="font-size: 10px;margin-left: 15px;">
    				per successful referral
    			</text>
    		</div>
    		<div style="margin-top: 50px;"></div>
    		<div style=" font-size: 16px; width: 85%; margin: 0 auto; text-align: center;">
    			Receive % of your friends’ points & extra % from their referrals’ points
    		</div>
    		<div style="display: flex;align-items:center;margin-top: 25px;justify-content: center;" >
    			<div>+ </div>
    			<img style="margin-left: 8px; width: 20px;height: 20px;" src="../static/img/bi.png" />
    			<text style="font-size: 14px;color: #C1E3FF;font-weight: bold; margin-left: 8px;">5%</text>
    			<text style="font-size: 10px;margin-left: 15px;">
    				of your friends points
    			</text>
    		</div>
    		<div style="margin-top: 30px;"></div>
    		<div style="background: #546C7F33;border-radius: 10px;height: 100px;">
    			<div style="padding: 15px;">
    				<div style="font-size: 17px;">My Referrals</div>
    				<div class="center" style="font-size: 20px; font-weight: bold; margin-top: 15px;color: #C1E3FF;">{{ share.points }}</div>
    			</div>
    		</div>
    		<div style="margin-top: 10px;"></div>
    		<div style="background: #546C7F33;border-radius: 10px;height: 100px;">
    			<div style="padding: 15px;">
    				<div style="font-size: 17px;">Bonus Points</div>
                    <div class="center"  v-if="share.peopleNumber ==0" style="font-size: 12px;margin-top: 15px;">You don’t have any referrals yet</div>
    				<div class="center" v-else style="font-size: 20px; font-weight: bold; margin-top: 15px;">{{ addCommas(share.peopleNumber) }}</div>
    			</div>
    		</div>
    		<div style="margin-top: 15px;"></div>
    		<div @click="openHandel" style="color: #000;background: #F6CB23;line-height: 54px; text-align: center; font-weight: bold; border-radius: 10px;font-size: 17px; height: 54px;" class="center">
    			Invite Friends
    		</div>
        </div>
        
        

       <div v-if="drawer" style="bottom: 0;width: 100%; background: rgb(27, 32, 37);border-top-right-radius: 20px;border-top-left-radius: 20px;position: fixed;z-index: 1000;">
            <div style="padding: 20px;">
                <div style="display: flex;justify-content: space-between;color: #fff;">
                    <label style="font-size: 26px; font-family: 'Regular';">Invite Friends</label>
                    <el-icon color="#fff" @click="drawer = false"><CloseBold /></el-icon>
                </div>
                <div style="color: #BDBDBD; font-size: 13px;margin-bottom: 40px;">Share and get extra bonus points</div>
                <div style="text-align: left;" >
                    <div style="position: relative;">
                        <div style="background-color:rgba(255, 255, 255, 0.16);height: 50px;border-radius: 10px; padding-left: 10px; color: #fff;align-items: center; display: flex;justify-content: space-between;">
                            <div style="overflow: hidden;width: 85%;text-overflow:ellipsis;white-space: nowrap;font-size: 12px; -o-text-overflow:ellipsis;">{{ postContent }}</div>
                             <img @click="copy" style="position: absolute; right: 10px; top: 12px; width: 25px;height: 25px;" src="../static/img/copy-01.png" />

                        </div>
                    </div>
                    <div class="sbumit_bnt" size="default" style="font-family: 'Bold'; font-size: 17px;" type="default" hover-class="is-hover" @click="signInHandel">{{ btn }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ElMessage } from 'element-plus'
export default {
    props: {
        share: {
            type: [Object, String],
            default:() => {}
        },
        user: {
            type: [Object, String],
            default:() => {}
        }
    },
    data() {
        return {
            drawer: false,
            title: 'Invite Friends',
            con: 'Share and get extra bonus points',
            btn: 'Send Link',
            postContent:''
        }
    },
    mounted() {
        this.postContent = 'https://t.me/JumpAndSay_bot/Jump?start=' + this.user.chatId 
    },
    methods: {
        addCommas(number) {
            return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        },
        copy() {
            this.$copyText(this.postContent)
            ElMessage({message:'Copy success!',type:'success'})
        },
         handleClose() {
            this.drawer = false
        },
        signInHandel() {
            this.$copyText(this.postContent)
            ElMessage({ message: 'Copy success!', type: 'success' })
        },
        openHandel() {
            this.drawer = true
            // if (this.user.hp == 0) {
            //     this.drawer = true
            // } else {
                // this.$emit('gameIndex', 1)
            // }
        }
    }
}
</script>

<style lang="scss" scoped>
    input{
    border: none;
    height: 30px;
    line-height: 30px;
    color: #fff;
    background-color:rgba(255, 255, 255, 0.16);
    padding: 5px;
    border-radius: 5px;
    width: 96%;
}
 .sbumit_bnt{
    width: 100%;
    color: #000;
    background-color:  #f6cb23;
    border-color: #f6cb23;
    margin-bottom: 30px;
    margin-top: 30px;
    font-family: Inter;
    font-size: 17px;
    font-weight: 600;
    line-height: 50px;
    border-radius: 6px;
    height: 50px;
    text-align: center;

}
</style>